<template>
  <div style="display: flex">
    <h3>学生管理系统</h3>
    <el-button style="margin-left: 85%" @click="toLogin">退出登录</el-button>
  </div>
  <el-menu :default-active="$route.path"
           class="el-menu-demo"
           :router="true"
           mode="horizontal"
           :unique-opened="true">

    <template v-for="item in menuData">
      <el-sub-menu v-if="item.children" :index="item.text">
        <template #title>
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.text }}</span>
        </template>
        <template v-for="child in item.children">
          <el-menu-item :index="child.path">
            <el-icon>
              <component :is="child.icon"></component>
            </el-icon>
            <span>{{ child.text }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item v-else :key="item.text" :index="item.path">
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.text }}</span>
      </el-menu-item>
    </template>
  </el-menu>

  <router-view></router-view>
</template>

<script setup>
import {useRouter} from "vue-router";

const menuData=[
  {text:'学生管理',icon:'UserFilled',path:'/admin/student'},
  {text:'教师管理',icon:'User',path:'/admin/teacher'},
  {text:'课程管理',icon:'Notebook',path:'/admin/course/info'},
  {text:'班级管理',icon:'DataLine',path:'/admin/class'},
  {text:'通知管理',icon:'DataLine',path:'/admin/inform'},
  {text:'课程申请审核',icon:'DataLine',path:'/admin/review'},
  {text:'评教管理',icon:'EditPen',children:[
      {text:'评教审核',icon:'EditPen',path:'rateCheck'},
      {text:'发布评教',icon:'EditPen',path:'issueRate'}
    ]}
]
const router = useRouter();
const toLogin=()=>{
  router.push('/login')
}
</script>
<style scoped>

</style>